<template>
  <div class="container">
    <div class="logo-box">
      <el-form
        :model="checkmsg"
        style="width: 200px"
        ref="login"
        :rules="rules"
      >
        <h2 style="margin-bottom: 10px; color: #b2bec3; font-size: 20px">
          后台管理系统
        </h2>
        <el-form-item size="mini" prop="usename">
          <el-input
            type="text"
            style="width: 100%"
            placeholder="usename"
            v-model="checkmsg.usename"
          ></el-input>
        </el-form-item>

        <el-form-item size="mini" prop="password">
          <el-input
            type="password"
            style="width: 100%"
            placeholder="password"
            v-model="checkmsg.password"
          ></el-input>
        </el-form-item>

        <el-form-item size="mini">
          <el-button
            type="success"
            style="font-size: 13px; width: 100%"
            @click="submitForm('login')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var check1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };

    var check2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      checkmsg: {
        usename: "",
        password: "",
      },
      loginmsg: {
        usemsg: "wanxi",
        keymsg: "123456",
      },
      rules: {
        usename: [{ validator: check1, trigger: "blur" }],
        password: [{ validator: check2, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.myaxios
            .post("http://housekeepi.com/api/admin/login", {
              name: this.checkmsg.usename,
              pw: this.checkmsg.password,
            })
            .then((success) => {
              if (success.data.msg == "") {
                let loginToken = success.data.data.token;
                localStorage.setItem("loginmsg", loginToken);
                localStorage.setItem("username",this.checkmsg.usename)
                this.$router.push({
                  path: "/backstage",
                });
              } else {
                this.$alert("用户名或密码错误", "登录失败", {
                  confirmButtonText: "确定",
                });
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>




<style scoped>
* {
  margin: 0;
}
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  background-size: 400%;
  animation: a1 30s infinite linear;
}
/* @keyframes a1 {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 200%;
  }
  100% {
    background-position: 400%;
  }
} */
.container .el-form-item--mini.el-form-item {
  margin-bottom: 18px;
}
.logo-box {
  width: 280px;
  background: rgba(9, 132, 227, 0.2);
  display: flex;
  justify-content: center;
  padding: 25px 5px;
  border-radius: 5px;
}
</style>
